<template>
  <div class="task-filter">
    <el-input
      v-model="localKeyword"
      placeholder="搜索任务标题或描述"
      clearable
      @input="handleSearch"
      style="width: 300px"
    >
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>

    <el-select
      v-model="localStatus"
      placeholder="状态"
      clearable
      @change="$emit('search')"
      style="width: 120px"
    >
      <el-option label="待办" value="TODO" />
      <el-option label="进行中" value="IN_PROGRESS" />
      <el-option label="已完成" value="COMPLETED" />
    </el-select>

    <el-select
      v-model="localPriority"
      placeholder="优先级"
      clearable
      @change="$emit('search')"
      style="width: 120px"
    >
      <el-option label="高" value="HIGH" />
      <el-option label="中" value="MEDIUM" />
      <el-option label="低" value="LOW" />
    </el-select>

    <el-select
      v-model="localSortBy"
      @change="$emit('search')"
      style="width: 150px"
    >
      <el-option label="按创建时间" value="createdAt" />
      <el-option label="按截止日期" value="dueDate" />
      <el-option label="按优先级" value="priority" />
    </el-select>

    <el-select
      v-model="localSortOrder"
      @change="$emit('search')"
      style="width: 100px"
    >
      <el-option label="降序" value="DESC" />
      <el-option label="升序" value="ASC" />
    </el-select>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  keyword: String,
  status: String,
  priority: String,
  sortBy: String,
  sortOrder: String
})

const emit = defineEmits([
  'update:keyword',
  'update:status',
  'update:priority',
  'update:sortBy',
  'update:sortOrder',
  'search'
])

const localKeyword = ref(props.keyword)
const localStatus = ref(props.status)
const localPriority = ref(props.priority)
const localSortBy = ref(props.sortBy)
const localSortOrder = ref(props.sortOrder)

let searchTimer = null

const handleSearch = () => {
  clearTimeout(searchTimer)
  searchTimer = setTimeout(() => {
    emit('update:keyword', localKeyword.value)
    emit('search')
  }, 500)
}

watch(localStatus, (val) => emit('update:status', val))
watch(localPriority, (val) => emit('update:priority', val))
watch(localSortBy, (val) => emit('update:sortBy', val))
watch(localSortOrder, (val) => emit('update:sortOrder', val))
</script>

<style scoped>
.task-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 6px;
}
</style>
